<template>
  <div class="coffee_machine_verification">
    <c-title :hide="false" text="核销码列表"></c-title>
    <div class="list">
      <div class="lis" v-for="(item, index) in listInfo" :key="index">
        <div class="left">{{ item.goods_name }}</div>
        <div class="right" v-if="item.status == 1">
          <div class="btn" @click="showTap(item.check_code, item.expire_time_str)">核销码</div>
        </div>
        <div class="right dea" v-else-if="item.status == 2">
          <div class="btn cdea">已使用</div>
        </div>
        <div class="right dea" v-else-if="item.status == -1 || item.status == -2">
          <div class="btn">已失效</div>
        </div>
      </div>
    </div>
    <van-popup v-model="show" style="background: transparent;" @closed="closePopup">
      <div class="divBox">
        <div class="posimg">
          <img @click="show = false" src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/images%2Ficon_cancle%402x.png" alt="" />
        </div>
        <div class="minbox">
          <!-- <img :src="imgShow.src" alt="" /> -->
          <p>核销码：{{ imgShow.code }}</p>
          <p>核销码有效时间3分钟</p>
          <div class="txt">兑换期限：{{ imgShow.expire_time_str }}</div>
        </div>
      </div>
    </van-popup>
  </div>
</template>
<script>
import { scrollMixin } from "utils/mixin";
export default {
  mixins: [scrollMixin], //加载更多
  data() {
    return {
      show: false,
      listInfo: [],
      imgShow: {
        code: "",
        expire_time_str: ""
      }
    };
  },
  activated() {
    this.getData();
  },
  methods: {
    closePopup() {
      this.imgShow.src = "";
      this.imgShow.expire_time_str = "";
    },
    showTap(code, expire_time_str) {
      $http.get("plugin.coffee-machine.frontend.buyer.autoCode", { check_code: code }, "loading").then(response => {
        if (response.result == 1) {
          this.show = !this.show;
          this.imgShow.expire_time_str = expire_time_str;
          this.imgShow.code = response.data.auto_code;
        } else {
          this.$toast(response.msg);
        }
      });
      // this.imgShow.src = src;
    },
    getData() {
      let json = {
        order_id: this.$route.params.order_id
      };
      $http.post("plugin.coffee-machine.frontend.buyer.codeList", json, "loading").then(response => {
        if (response.result == 1) {
          console.log(response);
          this.listInfo = response.data;
        } else {
          this.$toast(response.msg);
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.divBox {
  position: relative;
  background: transparent;
  .minbox {
    background: #ffffff;
    border-radius: 0.63rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    img {
      width: 10.63rem;
      height: 10.63rem;
      margin: 0;
    }
    .txt {
      margin-top: 1rem;
    }
  }
  .posimg {
    height: 1.5rem;
    margin-bottom: 0.94rem;
    display: flex;
    justify-content: flex-end;
    img {
      width: 1.5rem;
      height: 100%;
      margin: 0;
    }
  }
}
.minbox {
  width: 15.63rem;
  height: 15.19rem;
  background: rgba(255, 255, 255, 0.39);
}
.list {
  margin: 0 0.75rem;
  .lis {
    background: #ffffff;
    margin-top: 0.5rem;
    padding: 0.75rem;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 0.75rem;
    .left {
      text-align: left;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
      flex: 1;
      font-size: 0.88rem;
    }
    .right {
      flex-shrink: 0;
      background: #28b2fa;
      border-radius: 1.09rem;
      box-sizing: border-box;
      margin-left: 2.63rem;
      .btn {
        padding: 0.38rem 1.22rem;
        font-size: 0.75rem;
        color: #ffffff;
      }
    }
    .dea {
      background: #ffffff;
      .btn {
        color: #d6d6dc;
      }
      .cdea {
        color: #28b2fa;
      }
    }
  }
}
</style>
